<template>
    <div  class="home-wrapper" style="background-color: #c42d2e">
        <img src="../../../static/images/top.png" alt="" class="logo">
        <img src="../../../static/images/guize.png" alt="" class="secondTit">
        <div class="tab">
            
            <router-link :class="{tabActivity:activeIndex==0}" @click.native="activeIndex=0"  :to="{name:'Activity'}" tag="div">
                <img src="../../../static/images/btn-2.png" alt="" class="btn">
            </router-link>
            <router-link :class="{tabActivity:activeIndex==1}" @click.native="activeIndex=1" :to="{name:'Rank'}" tag="div">
                <img src="../../../static/images/btn-1.png" alt="" class="btn">
                
            </router-link>
        </div>

        


        <joinForm ref="rulePoup">
                <div class="popup">
                    <img src="../../../static/images/ruleTit.png" alt="" class="rule-logo">
                    <div class="desc">
                        
                        为了让更多人了解和参与南粤古驿道活化行动、 促进南粤古驿道旅游的发展，定格南粤古驿道上的风 采，由广东省文化和旅游厅指导，南越古驿道网主板，广州立健文化产业发展有限公司承办，广东省艺术摄影学会协办的“驿道同框”晒图大赛结果出炉了。
                        <br/>
                        从即日起至2020年2月8日，在排名最靠前的30张照片中，选取5张“我最喜欢的照片”，为其点赞，就有机会参与抽奖活动，赢取摄影器材和价值80员的南粤古驿道网精美礼品。
                        <br/>
                        <br/>
                        温馨提示<br/>
                        每天可投5票，可为你所支持的作品天天点赞
                    </div>
                    <button @click="ruleConfirm">确定</button>
                </div>  
        </joinForm>
        <transition name="fade">
            <router-view class="routerView"></router-view>
        </transition>
        <img src="../../../static/images/tishi.png" alt="" class="secondTit">
    </div>
</template>
<script>
import joinForm  from '@/components/joinForm';
export default {
    name:'Home',
    data(){
        return{
            activeIndex:0
        }
    },
    components:{
        joinForm
    },
    methods: {
        correctIndex(){
            //矫正tabBar
            if(this.$route.name=='Rank'){
                this.activeIndex=1
            }else{
                this.activeIndex=0
            }
        },
        showRulePoup(){
            this.$refs.rulePoup.show=true
        },
        ruleConfirm(){
            this.$refs.rulePoup.show=false
        }
    },
    mounted() {
        this.correctIndex()
    },
}
</script>
<style lang="scss" scoped>
    .home-wrapper{
        position: relative;
        background: url('../../../static/images/headerBg.png');
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position:fixed; 
    }
    .logo{
        width: 650px;
        margin-top:30px;
    }
    .rule-logo{
        width: 200px;
        margin-top:30px;
    }
    .secondTit{
        width: 650px;
        margin-top:40px;
    }

    
    .tab{
        // position: sticky;
        // top:0;
        display: flex;
        padding:20px 80px 0 80px;
        font-size: 30px;
        font-weight: 600;
        z-index: 10;
        
        
        &>div{
            flex:1;
        }
        .btn{
            width: 200px;
            padding: 20px 20px 0 20px;
        }
        .tabActivity{
            background: url('../../../static/images/btn-activity.png');
            background-size:100% auto; 
            background-repeat: no-repeat;
        }
    }
    /*动画*/
    .fade-enter-active {
    transition: opacity 1.5s;
    }
    .fade-enter {
    opacity: 0;
    }


    //弹窗
    .popup{
        
        .desc{
            text-align: left;
            padding: 10px;
            margin:20px 0;
                line-height: 30px;
                font-size: 24px;
                span{
                    color:#e84419
                }
            }
        .tip{
            text-align: left;
            padding: 10px;
            margin:20px 0;
        }
        .tipsVote{
            text-align: center;
            font-weight: 600;
            font-size: 30px;
            margin:30px 0;
        }
        input{
            border:none;
            padding: 10px;
            box-sizing: border-box;
            width: 100%;
            margin:20px 0;
            height: 50px;
            line-height: 50px;
        }
        button{
            color:#fff;
            font-weight: 600;
            background-color: #e84419;
            border-radius: 20px;
            padding: 20px 0;
            box-sizing: border-box;
            width: 90%;
            margin:20px 0;
        }
    }
</style>